<template>
	<default-header-page-layout ref="page" title="砂光入库" >
		<view class="page-frame with-action-user-row" :style="{height:pageBodyHeight+'px'}" v-if="pageBodyHeight">
			<action-user-row />
			<view class="with-action-user-row-page-content">
				<view class="sanding-in-page-content">
					<view class="top-view">
						<scan-input-form-item
							class="forma-item"
							label="托盘码"
							v-model="form.container"
							:msg="msg.container"
							:msg-type="msgType.container"
							@search="onSearchContainer"
							@clear="onClearContainer"
						/>
						
						<scan-input-form-item
							label="物料码"
							v-model="form.material"
							:msg="msg.material"
							@search="onSearchMaterial"
							@clear="onClearMaterial"
						/>
					</view>
					<view class="list-view">
						<!-- ########### -->
						<view class="list-items-group">
							<view class="list-item" v-for="(item,index) in list" :key="'list-item-'+index">
								<uni-swipe-action-item :auto-close="false">
									<view class="list-item-show">
										<view class="first-row">
											<view class="index-view">
												<uni-badge :text="list.length-index" type="primary" size="normal" />
											</view>
											<view class="content-view auto-wrap">{{item.materialNo}}</view>
										</view>
										<view class="item-row">
											<view class="label">尺寸</view>
											<view class="content">{{item.long}}*{{item.wide}}*{{item.high}}</view>
										</view>
										<view class="btns-row">
											<view :class="['check-btn',item.isSending?'active-btn':'']" @tap.stop="onChangeSanding(item,index,1)">已砂光</view>
											<view :class="['check-btn',!item.isSending?'active-btn':'']" @tap.stop="onChangeSanding(item,index,0)">未砂光</view>
										</view>
									</view>
									<template v-slot:right>
										<view class="swipe-action-btn danger" @tap.stop="onDel(index)"><text>删除</text></view>
									</template>
								</uni-swipe-action-item>
							</view>
						</view>
						<!-- ########### -->
					</view>
					<view class="end-view">
						<easy-select-form-item
							label="起始位置"
							v-model="form.stationCode"
							:list="selectOptions.startPlaces"
							value-field="stationCode"
							label-field="stationName"
							:clearable="false"
						/>
					</view>
				</view>
			</view>
		</view>
		<template v-slot:footer>
			<view class="bottom-btns-row">
				<view class="btn-frame"><u-button text="组 盘" @click="onBind"></u-button></view>
				<view class="divider"></view>
				<view class="btn-frame"><u-button type="primary" text="入 库" @click="onConfirm"></u-button></view>
			</view>
		</template>
	</default-header-page-layout>
</template>

<script>
import DefaultHeaderPageLayout from '@/components/DefaultHeaderPageLayout.vue'
import ActionUserRow from '@/components/ActionUserRow.vue'
import ScanInputFormItem from '@/components/ScanInputFormItem.vue'
import EasySelectFormItem from '@/components/EasySelectFormItem.vue'
import { $alert, $successInfo, parseDic } from '@/static/js/utils/index.js'
let initInterVal = null;
const defaultForm = {
	container:'',
	material:'',
	stationCode:''
}
export default {
	name:'sandingInstorePage',
	components:{DefaultHeaderPageLayout,ActionUserRow,ScanInputFormItem,EasySelectFormItem},
	data(){
		return {
			pageBodyHeight:0,
			form:{...defaultForm},
			msg:{
				container:'',
				material:''
			},
			msgType:{
				container:'error'
			},
			container:null,
			list:[],
			selectOptions:{
				startPlaces:[]
			}
		}
	},
	methods:{
		onSearchContainer(){
			if (!this.form.container) {
				this.msgType.container = 'error'
			  this.msg.container = '请输入托盘码！';
			  return false;
			}
			this.msg.container = '';
			this.getContainterInfo()
		},
		onClearContainer(){
			this.clearFullContainer()
		},
		onSearchMaterial(){
			if (!this.form.material) {
			  this.msg.material = '请输入物料码！';
			  return false;
			}
			if (!this.form.container) {
				this.clearMaterial()
				$alert('请先录入托盘信息！')
			  return false;
			}
			this.msg.material = '';
			this.getMaterialInfo()
		},
		onClearMaterial(){
			this.clearMaterial()
		},
		clearPage(){
			this.clearFullContainer()
			this.clearMaterial()
			this.clearStartPlace()
		},
		clearFullContainer(){
			this.clearContainter()
			this.clearBackContainer()
		},
		clearContainter(){
			this.form.container = ''
			this.msg.container = ''
		},
		clearBackContainer(){
			this.container = null
			this.list = []
		},
		clearMaterial(){
			this.form.material = ''
			this.msg.material = ''
		},
		clearStartPlace(){
			if (this.selectOptions.startPlaces.length!==1) {
				this.form.stationCode = ''
			}
		},
		getContainterInfo(){
			const __setErrMessage = function(__msg) {
				if (!__msg) {
					__msg = '网络错误，请稍后再尝试！'
				}
				this.msgType.container = 'error'
				this.msg.container = __msg;
			}.bind(this)
			let params = {ContainerCode:this.form.container}
			this.$api.get('SandGetContainer',params,{block:'sandingIn',warn:false,fullRes:true}).then((d)=>{
				if (d.data) {
					if (d.data.wmsContainer) {
						this.container = d.data.wmsContainer
						this.list = d.data.wmsMaterials || []
						let _temp1 = parseDic(this.$store,'container_status',this.container.containerStatus)
						this.msgType.container = 'info'
						this.msg.container = `尺寸：${this.container.specLength}*${this.container.specWidth}，状态：${_temp1}`
					} else {
						this.clearBackContainer()
						__setErrMessage(d.message)
					}
				} else {
					this.clearBackContainer()
					__setErrMessage(d.message)
				}
			}).catch(_errmsg=>{
				this.clearBackContainer()
				__setErrMessage(_errmsg)
			})
		},
		getMaterialInfo(){
			let params = {MaterialNo :this.form.material}
			this.$api.get('SandGetMaterial',params,{block:'sandingIn',warn:false}).then(d=>{
				if (d) {
					d.isSending = 1
					this.list.unshift(d)
				}
			}).catch(_errmsg=>{
				this.msg.material = _errmsg
			})
		},
		onChangeSanding(obj,index,val){
			if (Boolean(obj.isSending)===Boolean(val)) return false
			obj.isSending = val
			this.$set(this.list,index,obj)
		},
		onDel(index){
			this.list.splice(index,1)
		},
		onBind(){
			this.dealBind((f)=>{
				if (f) {
					$successInfo('组盘成功')
				}
			})
		},
		onConfirm(){
			this.dealConfirm((f)=>{
				if (f) {
					$successInfo('入库成功')
					this.clearPage()
				}
			})
		},
		/* 组盘接口调用 */
		dealBind(callback){
			let params = this.getSubmitParams('bind')
			this.$api.post('SandBindEntrance',params,{block:'sandingIn'}).then(()=>{
				callback && callback(true)
			}).catch((e)=>{
				callback && callback(false,e)
			})
		},
		/* 提交接口调用 */
		dealConfirm(callback){
			let params = this.getSubmitParams()
			this.$api.post('SandAutoWare',params,{block:'sandingIn'}).then(()=>{
				callback && callback(true)
			}).catch((e)=>{
				callback && callback(false,e)
			})
		},
		getSubmitParams(type='confirm'){
			let res = {
				containerCode:this.container?this.container.containerCode:null,
				wmsMaterials:this.list
			}
			if (type==='confirm') {
				res.stationCode = this.form.stationCode
			}
			return res
		},
		getStartOptions(){
			this.$api.get('StarPlaceList',{},{block:'sandingIn'}).then(d=>{
				this.selectOptions.startPlaces = d || []
				if (this.selectOptions.startPlaces.length===1) {
					this.form.stationCode = this.selectOptions.startPlaces[0].stationCode
				}
			}).catch(ex=>{
				console.log(ex)
			})
		},
		/* 页面初始化获取页面body高度的定时器 */
		startInitInterval(callback){
			initInterVal = setInterval(()=>{
				if (this.pageBodyHeight) {
					this.clearInitInterval()
					callback && callback()
				} else {
					this.pageBodyHeight = this.$refs.page.getBodyHeight()
				}
			},200)
		},
		/* 清除定时器 */
		clearInitInterval(){
			try{
				clearInterval(initInterVal)
				initInterVal = null
			}catch(e){
				//TODO handle the exception
			}
		}
	},
	onReady(){
		this.startInitInterval(()=>{
			/* 页面初始化后需要执行的代码在这边调用 */
			this.getStartOptions()
		})
	},
	onUnload(){
		this.clearInitInterval()
	}
}
</script>

<style scoped lang="scss">
.sanding-in-page-content{
	height: 100%;
	display: flex;
	flex-direction: column;
	&>.top-view,&>.end-view{
		flex-shrink: 0;
	}
	&>.end-view{
		padding: 8rpx 0 16rpx 0;
	}
	&>.list-view{
		height: 1px;
		overflow: auto;
		flex-grow: 1;
		.list-items-group {
			padding-top:12rpx;
			.list-item {
				margin-bottom: 12rpx;
				&:last-child{
					margin-bottom: 0;
				}
			}
		}
	}
	.forma-item{
		margin-bottom: 24rpx;
	}
	.list-item-show{
		background-color: $uni-bg-color;
		.first-row, .item-row{
			border-bottom: 2rpx dashed $uni-text-color-grey;
		}
		.first-row {
			display: flex;
			.index-view{
				flex-shrink: 0;
				padding: 16rpx 4rpx 0 16rpx;
			}
			.content-view{
				flex-grow: 1;
				width: 1px;
				font-size: 32rpx;
				padding: 16rpx 8rpx;
				line-height: 1.3em;
			}
		}
		.item-row{
			display: flex;
			padding: 0 16rpx;
			font-size: 1.1em;
			&>.label{
				opacity: .7;
				flex-shrink: 0;
				width: 130rpx;
				padding-top: 11rpx;
				.first-label-inner{
					display: flex;
					align-items: center;
					.batch-no{
						margin-left: 8rpx;
					}
				}
			}
			&>.content{
				width: 1px;
				flex-grow: 1;
				line-height: 1.5em;
				padding: 8rpx 0;
			}
		}
		.btns-row{
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 16rpx 0;
			.check-btn {
				background-color: $uni-text-color-grey;
				color: $uni-text-color-inverse;
				font-size: 1.3em;
				padding: 10rpx 40rpx;
				border-radius: 8rpx;
				cursor: pointer;
				&.active-btn {
					background-color: $uni-color-primary;
				}
			}
		}
	}
}
.bottom-btns-row{
	display: flex;
	padding: 10rpx 20rpx;
	background-color: #fff;
	.btn-frame{
		width: 1%;
		box-sizing: border-box;
		flex-grow: 1;
	}
	.divider{
		width: 20rpx;
		flex-shrink: 0;
	}
}
.swipe-action-btn{
	display: flex;
	color: $uni-bg-color;
	background-color: $u-primary;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100rpx;
	&.danger{
		background-color: $u-error;
	}
}
</style>